@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#ff9344;
.web {
    img {
        width: 100%;
    }
    header {
        .header_star {
            margin-top: r(-28);
            margin-right: r(24);
            .star_icon {
                color: $color;
                font-size: r(52);
            }
        }
    }
    section {
        .little_star {
                font-size: r(36);
                color: $color;
            }
        .details_kv {
            width: 94%;
            height: r(260);
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
        }
        .price {
            padding-left: 2.93%;
            padding-top: r(36);
            position: relative;
            span {
                font-size: r(72);
                color: $color;
                vertical-align: middle;
            }
            button {
                width: r(111);
                height: r(59);
                background-color: $color;
                font-size: r(30);
                color: white;
                border-radius: r(18);
                vertical-align: middle;
                position: absolute;
                right: 5.5%;
                top: r(85);
            }
        }
        .rate {
            padding-left: 4.5%;
            position: relative;
            height: r(42);
            margin-top: r(24);
            .little_star{
                position: absolute;
            }
            span {
                font-size: r(30);
                position: absolute;
                left: r(70);
            }
            
            .rate_num {
                color: $color;
                left: r(170);
            }
            a {
                font-size: r(26);
                color: #8e8e8e;
                position: absolute;
                right: 5.5%;
                height: r(42);
                line-height: r(42);
            }
        }
        .fit {
            width: 88.6%;
            height: r(67);
            margin-top: r(36);
            margin-left: auto;
            margin-right: auto;
            background-color: $color;
            color: white;
            font-size: r(30);
            padding-left: r(11);
            position: relative;
            span {
                line-height: r(67);
            }
            span:nth-of-type(2) {
                position: absolute;
                right: r(10);
            }
        }
        .store_list {
            height: r(176);
            padding-left: 5.5%;
            margin-top: 1.5%;
            position: relative;
            .store_img {
                width: 23.6%;
                height: r(176);
                
                font-size: r(24);
                position: relative;
                background-size: 100%;
                background-repeat: no-repeat;
                background-image: url("../img/details/grade(3).png");
                
                .img_cover{
                    background-color: rgba(white,.5);
                    position: absolute;
                    top: 50%;
                    height: r(39);
                    width: 100%;
                    text-align: center;
                    line-height: r(39);
                }
            }
            .bc_img1{
                background-size: 100%;
                background-repeat: no-repeat;
                background-image: url("../img/details/grade (2).png");
            }
            .bc_img2{
                background-size: 100%;
                background-repeat: no-repeat;
                background-image: url("../img/details/grade (1).png");
            }
            .store_button{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 5.5%;
                button {
                width: r(111);
                height: r(59);
                background-color: $color;
                font-size: r(30);
                color: white;
                border-radius: r(18);
                vertical-align: middle;
                
            }
            }
            .store_name{
                width: 45%;
                margin-left: auto;
                margin-right: auto;
                p:nth-of-type(1){
                    font-size: r(30);
                    line-height: r(40);
                }
                 p:nth-of-type(2){
                    font-size: r(26);
                    color: #929292;
                    line-height: r(40);
                    
                    span{
                        padding-left: r(14);
                    }
                   
                }
                 p:nth-of-type(3){
                    font-size: r(24);
                    color: #929292;
                    line-height: r(40);
                    
                }
                 p:nth-of-type(4){
                    font-size: r(20);
                    line-height: r(40);
                    
                    a{
                        color: $color;
                    }
                }
            }
        }
        
    }
}